<template>
    <div class="root">
        <div class="root-inner">
           <div>
            <router-link to="/">
                <img src="/static/pic/logo.png" class="pic">
            </router-link>
           </div>
           <div class="search">
               <span class="fa fa-search"></span>
               <input 
                type="text" 
                placeholder="请输入楼盘的名称" 
                v-model="searchname"
                @input="wordChange"
               >
           </div>
           <div class="bb" @click="showside">
               <span class="fa fa-list txt"></span>
           </div>
        </div> 
    </div>
</template>

<script>
    import axios from 'axios'
    import Bus from '../utils/Bus.js'
    export default{
        mounted:function(){
        },
        props:["side"],
        data:function(){
            return {
                searchname:"",
                timer:null,
                houselist:[],
                sort:""
            }
        },
        methods:{
            wordChange:function(){
                if(this.timer){
                    clearTimeout(this.timer);
                    this.timer=null;
                }
                this.timer =setTimeout(function(){
                    if(this.searchname){
                        this.http.post("/house/search",{word:this.searchname})
                        .then(res=>{
                            // console.dir(res);
                            console.log(this.sort);
                            if(this.sort=="价格从高到低"){
                                this.houselist = res.data.data.reverse();
                            }else{
                                this.houselist = res.data.data;
                                Bus.$emit("houselist",this.houselist);
                                Bus.$emit("searchname",this.searchname)
                            }
                        });
                    }
                }.bind(this),700);
            },
            showside:function(){
                this.side =true;
                Bus.$emit("showleftside",this.side)
            }
        }
    }
</script>

<style scoped>
.root{
    height: 44px;
    line-height: 44px;
}
.root-inner{
    display: flex;
    background-color: #FF6900;
    height: 44px;
}
.pic{
    width: 57px;
    height: 20px;
    margin: 12px 8px;
}
.search{
    /*border: 1px solid black;*/
    width: 60%;
    height: 30px;
    line-height: 30px;
    margin-top: 7px;
    background-color: white;
    border-radius: 4px;
    padding-left: 4px;
    color: #999999;
}
.search input{
    width: 85%;
    border: none;
    font-size: 12px;
    color: #999999;
    padding-left: 10px;
}
.bb{
    margin-left:20px;
    color: white;
}
</style>